<template>
  <div class="brand-maker">
    <FloorHeader :title="$t('brandMaker')" :tip="$t('brandMakerTip')" :link="$t('moreMaker')"/>
    <!-- 制造商列表 -->
    <div class="manufacture">
      <!-- 前2个展示的样式 -->
      <div class="column" v-for="(item, index) in list" :key="item.id" v-if="index <= 1">
        <div class="cover"
          :style="{ 'background-image': `url(${item.picUrl})` }">
          <h1 class="name">{{ item.name }}</h1>
          <div class="price">{{ item.floorPrice }}元起</div>
        </div>
      </div>
      <!-- 后2个展示的样式 -->
      <div class="column">
        <div class="cover small"
          v-for="(item, index) in list"
          :key="item.id"
          v-if="index > 1"
          :style="{ 'background-image': `url(${item.picUrl})` }">
          <h1 class="name">{{ item.name }}</h1>
          <div class="price">{{ item.floorPrice }}元起</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloorHeader from '@/components/index/FloorHeader'

export default {
  components: {
    FloorHeader
  },

  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/variable";
@import "./../../styles/common";

.brand-maker {
  width: 100%;
  .manufacture {
    display: flex;
    width: 100%;
    overflow: hidden;
    .column {
      flex: 1;
      padding-right: 10px;
      .cover {
        .transition;
        background-size: 100% 100%;
        background-position: center;
        cursor: pointer;
        width: 100%;
        height: 320px;
        .name {
          color: @font-color-six;
          font-size: 24px;
          padding: 36px 0 20px;
          text-align: center;
        }
        .price {
          border-top: 1px solid @font-color-six;
          color: @font-color-six;
          font-size: 14px;
          padding-top: 17px;
          margin: 0 auto;
          width: fit-content;
        }
        &:hover {
          background-size: 106% 106%;
        }
        &.small {
          height: 156px;
          .name {
            font-size: 20px;
            font-weight: 400;
            text-align: left;
            padding: 30px 0px 10px 20px;
          }
          .price {
            margin: 0px;
            margin-left: 20px;
          }
          &:first-child {
            margin-bottom: 8px;
          }
        }
      }
      &:last-child {
        padding-right: 0px;
      }
    }
  }
}
</style>
